<template>
	<view class="helang-tab-bar">
		<view class="placeholder" v-if="fixedBottom"></view>
		<view class="bar" :class="{'fixed':fixedBottom}">
			<!-- <view class="bulgy" :style="bulgyMove"></view> -->
			<view :class="'h-flex-x h-flex-' + tabList.length">
				<view class="item h-flex-x h-flex-center"
					v-for="(item,index) in  tabList" 
					:key="index" 
					:class="{
						'active':current == index,
						'recover':prevIndex == index
					}"
					@tap="change(item)"
				>
					<view>
						<view class="h-flex-x h-flex-center">
							<view class="icon">
								<i :class="'zi ' + item.icon"></i>
							</view>
						</view>
						<view :class="'h-flex-x h-flex-center txt-' +  (current == index ? 'active' : 'recover')">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	
	export default {
		// 冒泡
		name:"bottonNavBar",
		props:{
			// 固定底部
			fixedBottom:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				prevIndex:-1,
				current:1,
				tabList:[
					{
						"icon":"zi_home",
						"text":"首页",
						"url":"home/home"
					},
					{
						"icon":"zi_rabbit",
						"text":"圈子",
						"url":"topic/topicHotList"
					},
					// {
					// 	"icon":"zi_tmYelp",
					// 	"text":"发现"
					// },
					// {
					// 	"icon":"zi_tmYelp",
					// 	"text":"圈子"
					// },
					{
						"icon":"zi_father",
						"text":"我的",
						"url":"user/userCenter"
					},
				]
			};
		},
		computed:{
			bulgyMove(){
				let style = `left:${this.current/this.tabList.length*100}%;width: ${100 / this.tabList.length}%`;
				return style;
			}
		},
		methods:{
			change(item){
				if(this.current == item.index)return;
				this.prevIndex = this.current;
				this.current = item.index;
				
				uni.navigateTo({
				    url:'/pages/' + item.url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
// @import "./helang-flex.scss";
// @import "./tab-bar.scss";


/* 分列式弹性盒子，以X轴从左到右排列 */
.h-flex-x{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	color: #6a6a6a;
	
	/* 水平左对齐 */
	&.h-flex-left{
		justify-content: flex-start;
	}
	
	/* 水平居中对齐 */
	&.h-flex-center{
		justify-content: center;
	}
	
	/* 水平右对齐 */
	&.h-flex-right{
		justify-content: flex-end;
	}
	
	/* 水平两端对齐 */
	&.h-flex-space{
		justify-content: space-between;
	}
	
	/* 垂直顶部对齐 */
	&.h-flex-top{
		align-items: flex-start;
		align-content: flex-start;
	}
	
	/* 垂直底部对齐 */
	&.h-flex-bottom{
		align-items: flex-end;
		align-content: flex-end;
	}
	
	/* 允许换行 */
	&.h-flex-wrap{
		flex-wrap: wrap;
	}
	
	/* 等比分列，2-6列 */
	@for $i from 2 through 6
	{
		&.h-flex-#{$i}{
			&>view{
				width:(100% / $i);
			}
		}
	}
	
	/* 弹性元素 */
	&>.h-flex-item-grow{
		flex-grow: 1;
		width:0;
	}
}


.helang-tab-bar{
	.bar{
		// background-image: linear-gradient( #FED233, yellow);
		 box-shadow: darkgrey 10px 10px 30px 5px ;//边框阴影
		background-color: white;
		z-index: 999;
	}
	
	// 凸起
	// .bulgy{
	// 	height: 60rpx;
	// 	overflow: hidden;
	// 	position: absolute;
	// 	left: 0;
	// 	top: -38rpx;
	// 	transition: left 0.2s ease 0s;
	// 	z-index: -999;
		
	// 	&:before{
	// 		content: '';
	// 		display: block;
	// 		width: 300rpx;
	// 		height: 600rpx;
	// 		border-radius: 50%;
	// 		background-color: darkgrey;
	// 		position: absolute;
	// 		top: 0;
	// 		left: 50%;
	// 		margin-left: -150rpx;
	// 		z-index: -1;
	// 	}
	// }
	
	.item{
		height: 100rpx;
		position: relative;
		color: #6a6a6a;
		// font-size: 22rpx;
		line-height: normal;
		.icon {
			font-size: 45rpx;
		}
		
		
		&.active{
			.icon{
				color: #FED233;
			}
			
		}
		
		&.recover{
		}
	}
}


.txt-active {
	color: #FED233;
}

.txt-recover {
	// color: #FED233;
	font-size: 22rpx;
}

/**
 * 底部导通用样式
 * 作者：黄河爱浪
 * QQ：1846492969
 */

.helang-tab-bar{
	// font-size: 28rpx;
	
	view {
		box-sizing: border-box;
	}
	// 点位符
	.placeholder{
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
	}
	// 栏
	.bar{
		height: 100rpx;
		box-sizing: content-box;
		// background-color: #fff;
		position: relative;
		
		// 固定底部定位
		&.fixed{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
		}
	}
}

// 恢复默认
@keyframes recover
{
	from {
		transform:translateY(-20rpx) scale(1.1,1.1);
	}
	to {
		transform:translateY(0) scale(1,1);
	}
}
// 转换移动
@keyframes translate
{
	from {
		transform:translateY(0) scale(1,1);
	}
	to {
		transform:translateY(-20rpx) scale(1.1,1.1);
	}
}
// 圆圈缩放
@keyframes scale
{
	0% {
		transform:scale(1,1);
		opacity: 0;
		background-color: #e8c439;
	}
	100% {
		transform:scale(1.5,1.5);
		opacity: 0.13;
		background-color: #e8c439;
	}
}

// 淡入
@keyframes font
{
	from {
		color: #6a6a6a;
	}
	to {
		color: #aa9638;
	}
}
</style>
